<template>
<div id="app">
  <header style="display: none">
    <div>
    <img src="../../../assets/images/ticket.png" alt="">
    </div>
    <p>暂无可用优惠券~</p>
  </header>
  <div class="ticket">
    <ul>
      <li>¥<em>300</em> 预付款券（满200使用）</li>
      <li>金100g/金300g/金500g/银5000g</li>
      <li>有效期至：2018年12月1日</li>
    </ul>
    <div>
      立即使用
    </div>
  </div>
  <div class="ticket loseEfficacy">
    <ul>
      <li>¥<em>300</em> 预付款券（满200使用）</li>
      <li>金100g/金300g/金500g/银5000g</li>
      <li>有效期至：2018年12月1日</li>
    </ul>
    <div>已失效</div>
  </div>
</div>
</template>
<script>
  export default {
    name: "advance-ticket",
    beforeCreate() {
      document.querySelector('body').setAttribute('style', 'background-color:#f3f3f3')
    },
    beforeDestroy() {
      document.querySelector('body').removeAttribute('style')
    }
  }
</script>

<style lang="less" scoped>
#app {
  header {
    div {
      width: 6rem;
      height: 5.99rem;
      margin: 1.5rem auto 0;
    }
    p {
      color: #9f9f9f;
      text-align: center;
      font-size: 0.512rem;
    }
  }
  .ticket {
    background: #ffdeb0;
    display: flex;
    height: 3.41rem;
    margin: 1rem 0.5rem 0;
    border-radius: 15px;
    ul {
      flex: 7;
      padding: 0.5rem 0 0 0.7rem;
      color: #ff9500;
      li {
        font-size: 0.384rem;
        line-height: 0.8rem;
        &:nth-of-type(1){
          font-size: 0.512rem;
          em {
            font-size: 0.853rem;
          }
        }
      }
    }
    div {
      flex: 3;
      font-size: 0.512rem;
      text-align: center;
      color: #ff9500;
      line-height: 3.41rem;
      border-left: 1px dashed #ad9777;
      position: relative;
      &::before {
        width: 0.5rem;
        height: 0.5rem;
        position: absolute;
        content: "";
        top: -0.22rem;
        left: -0.25rem;
        background: #f3f3f3;
        border-radius: 50%;
      }
      &::after {
        width: 0.5rem;
        height: 0.5rem;
        position: absolute;
        content: "";
        bottom: -0.22rem;
        left: -0.25rem;
        background: #f3f3f3;
        border-radius: 50%;
      }
    }
   &.loseEfficacy {
      background: #eae8e8;
     ul {
       color: #9e9e9e;
     }
     div {
       color: #9e9e9e;
       border-color:#b7b5b5 ;
     }
    }
  }
}
</style>
